<template>
  <div class="main">
    <template>
      <el-table
        :data="otherss"
        style="width: 100%"
        :row-class-name="tableRowClassName">
        <el-table-column
          label="头像"
          prop="oimg"
          width="100"
        >
          <template slot-scope="scope">
            <img :src="getImgUrl(scope.row.oimg)" style="width: 30px;height: 30px;"/>
          </template>
        </el-table-column>
        <el-table-column
          prop="ono"
          label="id"
          width="120">
        </el-table-column>
        <el-table-column
          prop="ano"
          label="管理员"
          width="120">
        </el-table-column>
        <el-table-column
          prop="oname"
          label="供应商名称"
          width="120">
        </el-table-column>
        <el-table-column
          label="账号"
          prop="oid"
          width="120">
        </el-table-column>
        <el-table-column
          label="密码"
          prop="opwd"
          width="130">
        </el-table-column>
        <el-table-column
          label="地址"
          prop="oiddr"
          width="120">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEditOthers(scope.$index, scope.row)">编辑
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDeletrOthers(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="pageInfo.pageSize"
          layout="prev, pager, next, jumper"
          :total="pageInfo.itemCount">
        </el-pagination>
      </div>
      <!--弹框-->
      <el-button size="mini"
                 @click="handleAddOthers">新增
      </el-button>
      <addOthers v-if="addDialogIsShow" ref="showAddOthers"></addOthers>
      <editOthers v-if="editDialogIsShow" ref="showEditOthers"></editOthers>
      <deleteOthers v-if="deleteDialogIsShow" ref="showdeleteOthers"></deleteOthers>
    </template>
  </div>
</template>

<script>
  import api from "../../../../axios/api"
  import addOthers from '@/components/back/others/addOthers.vue'
  import editOthers from '@/components/back/others/editOthers.vue'
  import deleteOthers from '@/components/back/others/deleteOthers.vue'

  export default {
    name: "index",
    components: {
      addOthers,
      editOthers,
      deleteOthers
    },
    data() {
      return {
        otherss: [],
        addDialogIsShow: false,
        editDialogIsShow: false,
        deleteDialogIsShow: false,
        currentPage: 1,
        pageInfo: {}
      }

    },
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.currentPage = val;
        this.setDataFromAxios(val);
      },
      // getImgUrl: function (imgsrc) {
      //   return "../../../static/images/league/" + imgsrc;
      // },
      tableRowClassName({row, rowIndex}) {
        if (rowIndex % 2 == 0) {
          return 'warning-row';
        } else {
          return '';
        }
        return '';
      },
      getImgUrl: function (oimg) {
        return this.$store.state.host + "upload/images/others/" + oimg;
      },
      setDataFromAxios: function (currPage) {
        if (currPage != null) {
          this.currentPage = currPage;
        }
        //为什么要封装一下方法 1.每个vue组件有自己的一些参数处理，简化调用本来这个setDataFromAxios这个方法属于api 重新封装就属于当前页面
        api.setDataFromAxios(this.$store.state.host + "othersController/getOthersByPage?currPage=" + this.currentPage + "&pageSize=5", null, "post")
          .then(res => {
            console.log(res);
            this.otherss = res.tList
            this.pageInfo = res.obj;
          });//.then方法 就是当服务器有返回的时候执行回调函数，对比jquery的ajax success:function（data）

      },
      handleAddOthers: function () {
        let _this = this;
        _this.addDialogIsShow = true;
        _this.$nextTick(() => {
          _this.$refs.showAddOthers.init();
        })
      },
      handleEditOthers: function (index, others) {
        let _this = this;
        _this.editDialogIsShow = true;
        _this.$nextTick(() => {
          _this.$refs.showEditOthers.init(others);
        })
      },
      handleDeletrOthers: function (index, others) {
        let _this = this;
        _this.deleteDialogIsShow = true;
        _this.$nextTick(() => {
          _this.$refs.showdeleteOthers.init(others);
        })
      }
    },
    //vue init方法 当前页面初始化就自动执行的方法 一般用于页面初始化就读取数据
    created: function () {
      this.setDataFromAxios();//1.创建页面的时候 调用自定义的数据请求方法  而数据请求方法把得到数据赋值给了当前页面的变量
    }
  }
</script>

<style scoped lang="stylus">
  .main
    width 1000px
    margin 0 auto

  /deep/ .warning-row /*不写deep渲染出错*/
    background-color oldlace

  /deep/ .success-row
    background-color #f0f9eb

</style>
<style scoped lang="stylus">
  .main
    width 1000px
    margin 0 auto
  .el-pagination
    width 300px
    margin 0 auto
  /deep/ .warning-row /*不写deep渲染出错*/
    background-color oldlace

  /deep/ .success-row
    background-color #f0f9eb

</style>
